<template>
  <div class="bodyy">
    <el-collapse accordion v-model="activeName">
        <el-collapse-item name="1">
        <template slot="title" >
          <div class="title">
            <img src="../../assets/7.svg" alt="">
            <span id="cwzb">财务指标</span>
          </div>
        </template>
        <div class="content">
          <el-table
            ref="table"
            :data="transData"
            border
            height="100%"
            style="width: 100%"
            :header-cell-class-name="danyuange"
            :cell-class-name="danyuange"
            :header-cell-style="{background:'rgb(237,244,255)'}"
            >
            <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center" :width="item === ''?300:''">
                <template slot-scope="scope">
                    {{scope.row[index]}}
                </template>
            </el-table-column>
          </el-table>
        </div>
        </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { reqCaiwu,reqCaiwuJ } from '../../api/index'
export default {
    name:'CWZB',
    data(){
        return {
            activeName :'1',
            originData:[],
            transTitle:[],
            transData: [],
            originTitle: ['每股指标','基本每股收益(元)','毛利润（元）','稀释每股收益(元)','每股净资产(元)','每股公积金(元)','每股未分配利润(元)','每股经营现金流(元)','成长能力指标','营业总收入(万元)','营业总收入同比增长(%)','营业总收入滚动环比增长(%)','归属净利润(万元)','归属净利润同比增长(%)','归属净利润滚动环比增长(%)','扣非净利润(万元)','扣非净利润同比增长(%)','扣非净利润滚动环比增长(%)','毛利润（元）','盈利能力指标','加权净资产收益率(%)','摊薄总资产收益率(%)','毛利率(%)','净利率(%)','盈利质量指标','销售现金流/营业收入','经营现金流/营业收入','运营能力指标','总资产周转率(次)','	应收账款周转天数(天)','存货周转天数(天)','财务风险指标','资产负债率(%)','流动负债/总负债(%)','流动比率(%)','速动比率(%)','其他指标','摊薄净资产收益率(%)','实际税率(%)','预收款/营业收入',],
            
        }
    },
    computed:{
        ...mapState({
            gbbd:state => state.stock.stockInfo['股本变动']
        }),
    },
    async created(){
        await this.getCaiwu({"SCC":this.$route.params.scc})
        this.transTitle.push('')
        let result = await this.getCaiwuJ({"SCC":this.$route.params.scc,"Year":"2022"})
        result.Content.data.forEach(item => {
            this.originData.push(item)
        })
        let result1 = await this.getCaiwuJ({"SCC":this.$route.params.scc,"Year":"2021"})
        result1.Content.data.forEach(item => {
            this.originData.push(item)
        })
        let result2 = await this.getCaiwuJ({"SCC":this.$route.params.scc,"Year":"2020"})
        result2.Content.data.forEach(item => {
            this.originData.push(item)
        })
        console.log(this.originData);
        let matrixData = this.originData.map((row) => {
            let arr = []
            for (let key in row) {
                if(key !== 'showYear'){
                    arr.push(row[key])
                }
            }
            return arr
        })
        console.log(matrixData)
        this.transData = matrixData[0].map((col, i) => {
            return [this.originTitle[i], ...matrixData.map((row) => {
                return row[i]
            })]
        })
        console.log(this.transData)
    },
    mounted(){
        
    },
    methods:{
        async getCaiwu(params){
            const result = await reqCaiwu(params)
            console.log(result);
            // this.originData = result.Content.data.reverse()
            // for (let key in result.Content.data[0]) {
            //     if(key !== 'showYear'){
            //         this.originTitle.push(key)
            //     }
            // }
            
        },
        async getCaiwuJ(params){
            const result = await reqCaiwuJ(params)
            result.Content.data.forEach(item => {
                this.transTitle.push(item.showYear)
            });
            console.log(this.transTitle);
            return result
        },
        changeYear(value){
            // this.$bus.$emit('changeYear',value)
            console.log(value);
        },
        danyuange(scope){
            if(scope.rowIndex === 0 || scope.rowIndex === 8 || scope.rowIndex === 24 || scope.rowIndex === 19 || scope.rowIndex === 27 || scope.rowIndex === 36 || scope.rowIndex === 31){
                if(scope.columnIndex === 0){
                    return 'bordernone goleft'
                }
                return 'bordernone'
            } else if(scope.columnIndex === 0){
            return 'neirongleft'
            } else {
            return ''
            }
        }
    }
};
</script>

<style lang="less" scoped>
.bodyy {
    padding: 0 20px 20px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(226,226,226,0.50);
    box-shadow: 0 4px 14px 0 rgba(209,225,242,0.46);
    border-radius: 2px;
    margin-top: 25px;
}
.title {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    img {
        width: 30px;
        height: 30px;
    }
    span {
        font-size: 20px;
        margin-left: 12px;
    }
}
.content {
    width: 100%;
    height: 531px;
    // border: 1px solid #E9ECF3;
    /deep/ .my-label {
        background: rgb(241,247,255);
        width: 10%;
    }
    /deep/ .my-content {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        padding: 12px 25px;
        width: 20%;
    }
}
/deep/ .el-table tbody tr:hover>td {
background: rgb(219,233,255)!important;
}
// 序号靠右
/deep/ .el-table_2_column_6 .cell {
  text-align: center!important;
}
//修改收缩框title的高度
/deep/ .el-collapse-item__header {
    height: 70px!important;
}
.year {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 70px;
}
// 年度选择框
/deep/ .el-input {
    height: 100%;
}
/deep/ .el-input__inner {
    height: 100%;
}
/deep/ .el-input__suffix {
  display: flex;
  align-items: center;
}
// table 修改部分单元格
/deep/ .bordernone {
    border-right: none;
}
/deep/ .goleft {
    text-align: left!important;
    padding-left: 10px;
    font-weight: 900;
}
/deep/ .neirongleft {
    text-align: left!important;
    padding-left: 20px;
}
// 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #fff;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  opacity: 0.3;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: rgb(217,217,217);
}
</style>